<template>
  <div class="modify">
    <p class="header" @click="goOff()"><i class="el-icon-arrow-left"></i>修改信息</p>
    <div class="main">
      <div class="image" style="margin:0 auto;width:98px">
        <img src="../assets/img/heads.png"/>
      </div><!-- 头像 -->
      <div class="name">
        <label>昵称</label>
        <input type="text" v-model="user_name"/>
      </div>
      <div class="name ding">
        <label>手机号</label>
        <input type="text" v-model="mobile" />
        <button class="butmodify" @click="dialogPhone()">修改手机号</button>
      </div>
      <div class="name dings">
        <label>密码</label>
        <input type="password" />
        <button class="butmodify" @click="dialogPass()">修改密码</button>
      </div>
      <button class="determine" @click="determine()">确定</button>
      <el-dialog :visible.sync="dialogPhones" width="300px" style="margin-top:5vh;">
        <p class="nav">修改手机号</p>
        <div class="navBox">
          <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="mobile">
              <el-input v-model="ruleForm.mobile" placeholder="注册时填写的手机号"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model="ruleForm.code" placeholder="请填写验证码">
                <el-button slot="append" v-show="showTime" @click="sendEmail(ruleForm.code)" class="ma">获取验证码</el-button>
                <el-button slot="append" v-show="!showTime" class="ma">{{sendTime}}秒</el-button>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button @click="surePhone()" style="width:100%;margin:0 auto;background-color:#436AF2;line-height:40px;color:#fff;border:0;margin:30px 0;">确 定</el-button>
      </el-dialog>
      <el-dialog :visible.sync="dialogpasss" width="380px" style="margin-top:5vh;">
        <p class="nav">修改密码</p>
        <div class="navBox" style="padding:0 20px;">
         <el-form :model="ruleForms" status-icon ref="ruleForms" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="mobile">
              <el-input v-model="ruleForms.mobile" placeholder="请输入注册手机号"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model="ruleForms.code" placeholder="请填写验证码">
                <el-button slot="append" v-show="showTime" @click="sendEmail(ruleForm.code)" class="ma">获取验证码</el-button>
                <el-button slot="append" v-show="!showTime" class="ma">{{sendTime}}秒</el-button>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="ruleForms.password" placeholder="请输入6-8位数新密码" type="password"></el-input>
            </el-form-item>
          </el-form>
          <el-button style="width:100%;margin:0 auto;background-color:#436AF2;line-height:40px;color:#fff;border:0;margin:30px 0;" @click="surepassword()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    
    return{
      // 验证码
      showTime: true, /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      sendTime: '', /* 倒计时 计数器 */
      timer: null,
      user_name:"",
      mobile:"",
      dialogPhones:false,//修改手机号弹出框
      dialogpasss:false,//修改密码弹出框
      ruleForm:{
        mobile:"",
        code:"",
      },
      ruleForms:{
        mobile:"",
        code:"",
        password:""
      }
    }
  },
  methods:{
    //点击修改手机号
    dialogPhone(){
      this.dialogPhones=true
    },
    //修改手机号确定按钮
    surePhone(){
      this.$axios({
        method: 'post',
        url: '/admin/personal_information',
        params:{
          // mobile:this.ruleForm.mobile,
          mobiles:this.ruleForm.mobile,
          code:this.ruleForm.code,
        }
      })
      .then(res=>{
        this.mobile=res.data.data.mobile
        this.user_name=res.data.data.user_name
        this.infor()
        this.dialogPhones = false
      })
    },
     //点击修改密码
    dialogPass(){
      this.dialogpasss=true
    },
    //修改密码确定按钮
    surepassword(){
      this.$axios({
        method: 'post',
        url: '/admin/personal_information',
        params:{
          mobile:this.ruleForms.mobile,
          code:this.ruleForms.code,
          password:this.ruleForms.password,
        }
      })
      .then(res=>{
        this.mobile=res.data.data.mobile
        this.user_name=res.data.data.user_name
        this.infor()
        this.dialogPhones = false
      })
    },
    //点击修改昵称
    determine(){
      this.$axios({
        method: 'post',
        url: '/admin/personal_information',
        params:{
          name:this.name
        }
      })
      .then(res=>{
        console.log(res,'111')
      })
    },
    goOff(){
      this.$router.back();
    },
    infor(){
      var res = JSON.parse(localStorage.getItem('userdata'));
      this.$axios({
        method: 'post',
        url: '/admin/user_list',
        params:{
          mobile:res.data.mobile
        }
        
      })
      .then(res=>{
        this.mobile=res.data.data.mobile
        this.user_name=res.data.data.user_name
      })
    },
    /*点击发送验证码时，开始计数，一分钟发送一次*/
    sendEmail(){
      var xhr = new XMLHttpRequest();
      if(this.ruleForm.phone==''){
        alert('请输入手机号')
      }else{
        this.$axios({
        method: 'post',
        url: '/admin/send_validate_code',
        params: {
          mobile:this.ruleForm.mobile
        },
      })
      .then(res=>{
        console.log(res)
      });
        const TIME_COUNT = 60; //  更改倒计时时间
        if (!this.timer) {
          this.sendTime = TIME_COUNT;
          this.showTime = false;
          this.timer = setInterval(() => {
            if (this.sendTime > 0 && this.sendTime <= TIME_COUNT) {
              this.sendTime--;
            } else {
              this.showTime = true;
              clearInterval(this.timer); // 清除定时器
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
  },
  created(){
    this.infor()
  }
}
</script>
<style scoped>
/deep/ .el-form-item{margin-top:20px;}
/deep/ .el-form-item__content{margin-left:0 !important;}
/deep/ .el-form-item__label{float:none}
/deep/ .el-input__inner{outline:none;border:0;border:1px solid #EFEFF0;}
/deep/ .el-form-item__label{width: 100%;display: block;font-size:18px;color:#3D3D3D;font-weight: 600px;text-align: left;}
*{margin:0;padding:0;}
.modify{background-color:#fff ;height:100vh;box-sizing: border-box;}
.header{border-bottom:1px solid #F4F4F4;line-height:50px;color:#8A8989;font-weight: 560;}
.header .el-icon-arrow-left{padding:0 10px;font-weight: 600;}
.main{width:500px;margin:10vh auto;}
.name{margin-top:15px;}
.name label{width: 100%;display: block;font-size:18px;color:#3D3D3D;font-weight: 600px;text-indent: 1.8em;}
.name input{width: 100%;display: block;border:0;outline:none;border-bottom:1px solid #EFEFF0;font-size:16px;line-height:40px;text-indent: 2em;color:#898989}
.determine{width:90%;margin-left:5%;margin-top:30px;background-color: #436AF2;color:#fff;line-height:50px;border:0;border-radius: 10px;font-size:18px;}
.name input::-webkit-input-placeholder{color: #CECECE;font-size:15px;}
.name input::-moz-placeholder{color: #CECECE;font-size:15px;}
.name input:-ms-input-placeholder{color: #CECECE;font-size:15px;}
.ding,.dings{position: relative;}
.ding .butmodify,.dings .butmodify{position: absolute;top:6px;right:0;width:90px;height:35px;line-height:35px;background-color:#fff;border:0px;border:1px solid #F3F3F4;border-radius: 20px;font-size:10px;color:#898989}
.nav{text-align: center;color:#3D3D3D;font-size:18px;margin:0 auto;border-bottom:1px solid #F7F7F7;padding-bottom:15px;}
/deep/ .el-input-group__append{border:2px solid #859EF7;background-color: #fff;color:#859EF7;border-radius: 5px;font-size:8px;width:35px;text-align: center;}
</style>